<template>
    <div class="direct">
        <div class="demo-input-suffix" style="margin-right:15px;">
            <el-checkbox v-model="checkbox_isShowDirectTable" @change="isShowDirectTable">显示指导员信息列表</el-checkbox>
        </div>
        <div class="demo-input-suffix">指导员姓名：</div>
        <div class="demo-input-suffix" style="margin-left:5px;margin-right:15px;">
            <el-select  placeholder="全部" @change="loadAllBoxs">
                <el-option
                    v-for="item in dataWorkerList"
                    :key="item.id"
                    :label="item.NAME"
                    :value="item.id"
                ></el-option>
            </el-select>
        </div>
        <div class="demo-input-suffix">指导员负责区域：</div>
        <div class="demo-input-suffix" style="margin-left:5px;margin-right:15px;">
          <el-cascader :options="dataVillageList" :show-all-levels="false" @expand-change="select_village_action" @change="select_village_action"></el-cascader>
        </div>
        <div class="allmap" id="allmap"></div>
        <el-table
            :data="dataWorkerList"
            stripe
            class="DirectTable"
            id="DirectTable"
            @row-click="getDetails"
        >
            <el-table-column prop="NAME" label="指导员" width="150"></el-table-column>
            <el-table-column prop="SIMCARD_NO" label="负责区域名称" width="250"></el-table-column>
            <el-table-column prop="BUILDING" label="当前位置" width="250"></el-table-column>
            <el-table-column prop="PHONE" label="手机号码"></el-table-column>
            <el-table-column prop="CREATE_DATE" label="最新在线时间" width="150"></el-table-column>
        </el-table>
    </div>
</template>
<script>
import '../../assets/css/common.css'
export default {
  data () {
    return {
      value_select_worker: '',
      value_select_village: true,
      map: '',
      dataVillageList:[],
      dataWorkerList: [],
      dataRubbishBoxsList: [],
    }
  },
  mounted () {
    this.initMap();
    
    this.loadAllBoxs('1001')
    this.loadAllWorker()
    this.loadAllVillage()
  },
  methods: {
    async loadAllVillage () {
      var url = 'http://111.160.78.62:9942/GarbagePointsApi/BasicData/GetGroupsApi';
      const { data } = await this.$axios.get(url)
      this.dataVillageList = data.filter(item => {
        return item
      })
    },
    async loadAllWorker (CLIENT_NO) {
      var url = 'http://111.160.78.62:9942/GarbagePointsApi/BasicData/GetWorkerListApi';
      const { data } = await this.$axios.get(url)
      this.dataWorkerList = data.filter(item => {
        var point = new BMap.Point(item.LONGITUDE, item.LATITUDE);
        var myIcon = new BMap.Icon("https://www.easyicon.net/api/resizeApi.php?id=1185658&size=24", new BMap.Size(32, 35));
        var marker = new BMap.Marker(point, { icon: myIcon });
        marker.setTop(true);
        var label = new BMap.Label(item.NAME, { offset: new BMap.Size(20, -10) });
        marker.setLabel(label);
        this.map.addOverlay(marker);
        return item
      })
    },
    async loadAllBoxs (CLIENT_NO) {
      var url = 'http://111.160.78.62:9942/GarbagePointsApi/BasicData/RubbishBoxApi?VillageNo='+CLIENT_NO;
      const { data } = await this.$axios.get(url)
      this.dataRubbishBoxsList = data.filter(item => {
        var point = new BMap.Point(item.LONGITUDE, item.LATITUDE);
        var myIcon = new BMap.Icon("https://www.easyicon.net/api/resizeApi.php?id=1284995&size=32", new BMap.Size(32, 35));
        var marker = new BMap.Marker(point, { icon: myIcon });
        var label = new BMap.Label(item.NAME, { offset: new BMap.Size(20, -10) });
        marker.setLabel(label);
        this.addInfoWindow(marker);
        this.map.addOverlay(marker);
        return item
      })
    },
    select_client (data) {
      this.loadAllWorker(data.value)
      this.loadAllBoxs(data.value)
    },
    isShowDirectTable (val) {
      if (val) {
        document.getElementById("DirectTable").removeAttribute("hidden", true);
      } else {
        document.getElementById("DirectTable").setAttribute("hidden", true);
      }
    },
    select_village_action (value) {
        console.log(value);
      },
    initMap () {
      var City = '天津'
      this.map = new BMap.Map('allmap')
      var point = new BMap.Point(117.612137, 39.043002) // 创建点坐标
      this.map.setCurrentCity(City)
      this.map.centerAndZoom(point, 18) // 初始化地图，设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放

    },
    getDetails (row) {
      console.log(row)//此时就能拿到整行的信息
      this.setMapCenterAtWorkerMarker(row)
    },
    setMapCenterAtWorkerMarker (row) {
      this.map.centerAndZoom(new BMap.Point(row.LONGITUDE, row.LATITUDE), 18)
    },
    addInfoWindow (marker) {
      var sContent = '<iframe src="../../infowindow.html" width=400 height=220 frameborder=0 scrolling=no></iframe>'
        // var sContent = "<h4 style='margin:0 0 2px 0;padding:0.2em 0'>体院北育贤里7号楼1门</h4>"
        //   + "<div><img id='imgDemo' style='float: left;width:90px;height=100%;' src='https://taojin-his.cdn.bcebos.com/03087bf40ad162d9ac75ef6d1edfa9ec8a13cd2c.jpg' alt='logo'>"
        + "<p style='margin:0;line-height:1.5;font-size:17px;text-indent:1em'>厨余垃圾桶：5.2kg</p>"
        + "<p style='margin:0;line-height:1.5;font-size:17px;text-indent:1em'>可回收圾桶：3.4kg</p>"
        + "<p style='margin:0;line-height:1.5;font-size:17px;text-indent:1em'>其他垃圾桶：已满溢</p>"
        + "<p style='margin:0;line-height:1.5;font-size:17px;text-indent:1em'>有害垃圾桶：1.1kg</p>"
        + "<br>"
        + "<p style='margin:0;line-height:1.5;font-size:17px;text-indent:1em'>指导员：张旭</p>";
      // + "</div>";
      var infoWindow = new BMap.InfoWindow(sContent, { width: 400, height: 400 });  // 创建信息窗口对象
      marker.addEventListener("click", function () {
        this.openInfoWindow(infoWindow);
      });
    }
  },
}
</script>
<style scoped>
.allmap {
    width: 100%;
    height: 96%;
    border: 1px solid darkgrey;
    position: absolute;
    left: 0;
    top: 45px;
    right: 0;
    bottom: 0;
    margin: auto;
}
.direct,
body {
    width: 100%;
    height: 100%;
    position: relative;
}
.DirectTable {
    font-size: 15px;
    position: absolute;
    left: 5px;
    bottom: 0px;
    z-index: 555;
    width: 99.5%;
    height: 220px;
    opacity: 0.9;
    /*background: rgb(177, 209, 177);*/
}
.demo-input-suffix {
    float: left;
    font-size: 15px;
    height: 32px;
    line-height: 32px;
}
</style>